<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消费申报</title>

    <link rel="stylesheet" href="../../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../../bootstrap/css/bootstrap-datepicker.min.css">
    <script src="../../../bootstrap/js/jquery-1.9.1.min.js"></script>
    <script src="../../../bootstrap/js/bootstrap.js"></script>
    <script src="../../../bootstrap/js/vue.js"></script>
    <script src="../../../bootstrap/js/axios.min.js"></script>

    <style>
        .btn{
            width: 80px;
        }
        label,.col-md-3,.col-md-1{
            display:inline;
        }
        .form-control{
            display:inline;
            width:75%;
        }

        .imgBtn{
            display: inline;
            padding: 12px;
            width: 75px;
            height: 35px;
            line-height: 35px;
            border: 1px solid #23c6c8;
            background: #23c6c8;
            color: #fff;
            text-align: center;
            font-size: 14px;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            vertical-align: center;
        }
        .imgBtn:hover{
            border: 1px solid #23babc;
            background: #23BABC;
        }
        .imgBtn input{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .form-control{
            width: 65%;
            display: inline;
        }
        .col-md-picker{
            display: inline;
            left: 0;
            top: 0;
        }
 </style>



</head>
<body>

<div id="app">

    <div class="container" style="margin-top:60px">

        <form action="#" class="form-horizontal" role="form">

            <div class="form-group">
                <label  class="control-label col-md-2 col-md-offset-3">消费日期:</label>
                <label class="col-md-3 col-md-picker">
                    <input data-date-format="yyyy-mm-dd"
                           class="col-md-3 form-control" id="datepicker">
                </label>
            </div>

            <!-- 表单控件组 城市下拉框 -->
            <div class="form-group">
                <label class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目:&nbsp;&nbsp;</label>
                <div class="col-md-3">
                    <select id="" class="form-control" v-model="projectVal">
                        <option v-for="obj in list" :value="obj">{{obj.name}}</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="uName" class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金额:&nbsp;&nbsp;</label>
                <div class="col-md-3">
                    <input type="text" id="uName" v-model="expenditure.price"
                           class="col-md-3 form-control" placeholder="请输入金额:">
                </div>
            </div>

            <div class="form-group">
                <label for="uName" class="control-label col-md-2 col-md-offset-3">账单照片:&nbsp;&nbsp;&nbsp;</label>
                    <label class="imgBtn" >
                        <span id="selects">选择照片</span>
                        <input type="file" id="photoId" class="file" style="width:50px"  @change="uploadFile($event)"/>
                    </label>
            </div>
            <div class="form-group" >
                <label class="control-label col-md-2 col-md-offset-3" ></label>
                <div class="col-md-3" style="margin-left:50px">
                   <img width="40px" height="40px" style="margin-left:10px;margin-bottom: 5px"
                         v-for="(img,index) in imgList"
                        :src="img" @click="removeImg(index)"/>
                </div>
            </div>
            <div class="form-group">
                <label for="introduction"  class="control-label col-md-2 col-md-offset-3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注:</label>
                <div class="col-md-3">
                    <textarea name="" id="introduction"
                              v-model="expenditure.notes" class="form-control"></textarea>
                </div>
            </div>

            <!-- 表单控件组 按钮 -->
            <div class="form-group">
                <label class="control-label col-md-2 col-md-offset-3"></label>
                <div class="col-md-3" style="margin-left:55px">
                    <button type="button" class="btn btn-success" @click="save">申报</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-success"
                            onclick="location='/staff/reimbursement/list'">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>


<script src="../../../bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="../../../bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script>

    let files = null;

    new Vue({
        el:"#app",
        data:{
            list: [],
            expenditure: {},
            projectVal:{},
            imgUrl: '',
            imgList: [],
            removeImgFlag:0
        },
        // created:function (){ // 回显的时候返回不了项目的值，有可能被页面标签的值覆盖了
        //     this.selectList()
        // },
        mounted:function (){
            this.selectList()
        },
        methods:{
            getUrlId:function (){
                var url = window.location.href;
                let id = url.split("=")[1];
                return id;
            },
            selectList:function () {
                axios.get(
                    "/staff/area/getByUid"
                ).then(response=>{
                    this.list = JSON.parse(response.data.projectList)
                    let id = this.getUrlId();
                    if(id!=undefined){
                        this.findById(id)
                    }
                })
            },
            findById:function (id) {
                axios.get(
                    "/staff/reimbursement/findById/"+id
                ).then(response=>{
                    this.expenditure = response.data
                    this.projectVal={}
                    this.projectVal.id = this.expenditure.projectId
                    this.projectVal.name = this.expenditure.projectName
                    this.imgList = this.expenditure.imgList
                    $("#datepicker").val(this.formatDateVal(this.expenditure.createTime))
                })
            },
            save:function (){
                console.log(this.projectVal)
                this.expenditure.projectId = this.projectVal.id
                this.expenditure.projectName = this.projectVal.name
                this.expenditure.createTime = $("#datepicker").val()
                this.expenditure.imgList = this.imgList
                this.expenditure.price = parseInt(this.expenditure.price)
                console.log(this.expenditure)
                axios.post("/staff/reimbursement/saveOrUpdate",this.expenditure, {
                    headers: {
                        'Content-Type': 'application/json'
                    }})
                    .then(response=>{
                        window.location.href="/staff/reimbursement/list";
                    })
            },
            removeImg:function (index){ // 上传错照片，可以双击照片删除
                this.removeImgFlag++;
                if(this.removeImgFlag==2){
                    this.imgList.splice(index,1)
                    this.removeImgFlag = 0
                }
            },
            uploadFile:function (val){
                console.log("=============")
                console.log(val.target.files[0].name)
                const form=new FormData();
                form.append("imgFile",val.target.files[0]);
                axios.post("/staff/project/uploadFile",form, {
                    headers: {
                        'Content-Type': 'application/json'
                    }}).then(response=>{
                    console.log(response.data);
                    this.imgList.push("https://www.krwl.top/img/"+response.data)
                    $('input[type="file"]').val(null);
                    let fileInput = document.getElementById('photoId');
                    fileInput.value = ''; // 清除文件输入的值
                })
            },
            formatDateVal(value) {
                let date = new Date(value)
                if(date.getDate()>=10){
                    return date.getFullYear()+"-"+0+(date.getMonth()+1)+"-"+date.getDate();
                }else{
                    return date.getFullYear()+"-"+0+(date.getMonth()+1)+"-"+0+date.getDate();
                }

            }
        }
    });

    $('#datepicker').datepicker({
        weekStart: 1,
        daysOfWeekHighlighted: "6,0",
        autoclose: true,
        todayHighlight: true,
        language: "zh-CN"
    });
    $('#datepicker').datepicker("setDate", new Date());



</script>

